<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02_模板语法</title>
  </head>

  <body>
    <div id="app">
      <h2>双大括号表达式</h2>
      <p>{{msg}}</p>
      <p>{{a}}</p>
      <p>{{isShow ? 'aaa' : 'qsf'}}</p>

      <h2>2. 指令一: 强制数据绑定</h2>
      <input type="text" v-bind:value="name" />
      <input type="text" :value="name" />
      <input type="text" value="name" />
      <input type="text" v-model="name" />

      <h2>3. 指令二: 绑定事件监听</h2>
      <button v-on:click="handleClick">按钮一</button>
      <button v-on:mousemove="handleMove">按钮二</button>

      <button @click="handleClick">按钮1</button>
      <button @click="handleMove">按钮2</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      /*
        1.插值语法：双大括号，只能用于标签内，不能用于标签属性{{JS表达式}}，动态渲染Vue的数据。

        2.指令语法：
            v-bind:value="name" 强制绑定数据，单向数据，用来给标签属性绑定一个Vue动态数据。简写 ：value="name"

            v-model 双向数据绑定  v-model="name",给元素绑定input事件，在事件中收集用户输入的值，自动修改表达式的值

            v-on 绑定事件， v-on:click="handleClick"  事件名称全小写，回调函数要定义在methods中   简写：@click="handleClick"

        3.MVVM 一种设计模式，特点可以是双向数据
          M - Model 数据层（代表vue中的数据-data数据）
          V - View 视图层（代表vue的模板页面-html代码）
          VM - ViewModel 试图模型层（vue本身，它内部做的事）

          react是单项数据流：数据只能由Model层流向View层，不能反过来
          vue是双向数据流：借助 v-model实现双向，数据能从Model层流向View层，也能从View层流向Model层
      */

      new Vue({
        el: "#app",
        data: {
          msg: "hello vue",
          isShow:true,
          name: "佳佳",
        },
        methods: {
          handleClick() {
            console.log("hello click");
          },
          handleMove() {
            console.log("hello move");
          },
        },
      });
    </script>
  </body>
</html>
